<!-- 文字配置 -->
<template>
  <div>
    <el-form-item label="文本内容">
      <avue-input v-model="main.activeObj.data.value"></avue-input>
    </el-form-item>
    <el-form-item label="字体大小">
      <avue-input-number v-model="main.activeOption.fontSize"
                         :max="200"></avue-input-number>
    </el-form-item>

    <el-form-item label="字体间距">
      <avue-slider v-model="main.activeOption.letterSpacing"></avue-slider>
    </el-form-item>
    <el-form-item label="字体行高">
      <avue-slider v-model="main.activeOption.lineHeight"></avue-slider>
    </el-form-item>
    <el-form-item label="文字粗细">
      <avue-select v-model="main.activeOption.fontWeight"
                   :dic="dicOption.fontWeight">
      </avue-select>
    </el-form-item>
    <el-form-item label="对齐方式">
      <avue-select v-model="main.activeOption.textAlign"
                   :dic="dicOption.textAlign">
      </avue-select>
    </el-form-item>
    <el-form-item label="字体颜色" >
      <avue-input-color v-model="main.activeOption.color"></avue-input-color>
    </el-form-item>
    <el-form-item label="字体背景" >
      <avue-input-color v-model="main.activeOption.backgroundColor"></avue-input-color>
    </el-form-item>
    <template>
      <el-form-item label="背景图片">
        <img v-if="main.activeOption.backgroundImage"
             :src="main.activeOption.backgroundImage"
             alt=""
             width="100%" />
        <el-input v-model="main.activeOption.backgroundImage">
          <div @click="main.handleOpenImg('activeOption.backgroundImage')" slot="append">
            <i class="iconfont icon-img"></i>
          </div>
        </el-input>
      </el-form-item>
    </template>
    <el-form-item label="阴影颜色" >
      <avue-input-color v-model="main.activeOption.textShadowColor"></avue-input-color>
    </el-form-item>
    <el-form-item label="阴影位置(x y z)" >
      <avue-input-number v-model="main.activeOption.textShadowX"
                         :min="-20" :max="20"></avue-input-number>
      <avue-input-number v-model="main.activeOption.textShadowY"
                         :min="-20" :max="20"></avue-input-number>
      <avue-input-number v-model="main.activeOption.textShadowZ"
                         :max="50"></avue-input-number>
    </el-form-item>
    <el-form-item label="文本样式">
      <avue-select v-model="main.activeOption.textStyle"
                   :dic="textStyles">
      </avue-select>
    </el-form-item>
    <el-form-item label="展示时长(ms)">
      <avue-input-number v-model="main.activeOption.timeOut">
      </avue-input-number>
    </el-form-item>
    <el-form-item label="是否显示">
      <avue-switch v-model="main.activeOption.isShow">
      </avue-switch>
    </el-form-item>
    <el-form-item label="动画设置">
      <avue-select v-model="main.activeOption.animateName"
                   :dic="animateNames">
      </avue-select>
    </el-form-item>
    <el-form-item label="动画时间(s)">
      <avue-input-number v-model="main.activeOption.animateDuration">
      </avue-input-number>
    </el-form-item>
    <el-form-item label="动画延时(s)">
      <avue-input-number v-model="main.activeOption.animateDelay">
      </avue-input-number>
    </el-form-item>
    <el-form-item label="重复次数">
      <avue-input-number v-model="main.activeOption.animateRepeat">
      </avue-input-number>
    </el-form-item>

  </div>
</template>

<script>
import { dicOption } from '@/option/config'
export default {
  data () {
    return {
      dicOption: dicOption,
      textStyles: [
        { value: 'none', label: '无' },
        { value: 'text-plus-1', label: '样式1' },
        { value: 'text-plus-2', label: '样式2' },
        { value: 'text-plus-3', label: '样式3' },
        { value: 'text-plus-4', label: '样式4' },
        { value: 'text-plus-5', label: '样式5' },
        { value: 'text-plus-6', label: '样式6' },
        { value: 'text-plus-7', label: '样式7' },
        { value: 'text-plus-8', label: '样式8' },
        { value: 'text-plus-9', label: '样式9' },
        { value: 'text-plus-10', label: '样式10' },
        { value: 'text-plus-11', label: '样式11' },
        { value: 'text-plus-12', label: '样式12' },
        { value: 'text-plus-13', label: '样式13' },
        { value: 'text-plus-14', label: '样式14' },
      ],
      animateNames: [
        { value: 'none', label: '无' },
        { value: 'bounce', label: 'bounce' },
        { value: 'flash', label: 'flash' },
        { value: 'pulse', label: 'pulse' },
        { value: 'rubberBand', label: 'rubberBand' },
        { value: 'shakeX', label: 'shakeX' },
        { value: 'shakeY', label: 'shakeY' },
        { value: 'headShake', label: 'headShake' },
        { value: 'swing', label: 'swing' },
        { value: 'tada', label: 'tada' },
        { value: 'wobble', label: 'wobble' },
        { value: 'jello', label: 'jello' },
        { value: 'heartBeat', label: 'heartBeat' },
        { value: 'bounceIn', label: 'bounceIn' },
        { value: 'bounceInDown', label: 'bounceInDown' },
        { value: 'bounceInLeft', label: 'bounceInLeft' },
        { value: 'bounceInRight', label: 'bounceInRight' },
        { value: 'bounceInUp', label: 'bounceInUp' }
      ]
    }
  },
  methods:{
  },
  inject: ["main"]
}
</script>

<style scoped>

</style>
